<template>
  <div class="page-edit-base-info">
    <div class="prod-base-info">{{ productInfo.productName }} {{ productInfo.version }}</div>
    <svg-icon icon-class="编辑" className='icon-edit' @click="openDialog"/>
    <el-dialog title="编辑版本" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body :close-on-click-modal='false'>
      <div class="edit-base-dialog">
        <el-form ref="form" :model="formData" :rules="rules" label-position="top" class="left-form">
          <el-form-item label="版本描述" prop="remark">
            <el-input type='textarea' :rows="7" v-model="formData.remark" maxlength="200" :disabled='!editVersionStatus'></el-input>
          </el-form-item>
          <el-form-item label="触发方式描述" prop="triggerDesc">
            <el-input v-model="formData.triggerDesc" maxlength="100" :disabled='!editVersionStatus'></el-input>
          </el-form-item>
          <el-form-item label="服务执行描述" prop="serviceExecuteDesc">
            <el-input v-model="formData.serviceExecuteDesc" maxlength="100" :disabled='!editVersionStatus'></el-input>
          </el-form-item>
          <el-form-item label="产品有效期设置" prop="durationType" class="mb0">
            <div class="duration-type-area">
              <el-radio-group v-model="formData.durationType" :disabled='!editVersionStatus'>
                <el-radio label="permanent">长期有效</el-radio>
                <el-radio label="period">指定具体有效期限</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item v-if="formData.durationType === 'period'" prop='timeRange' class="edit-base-dialog-time-range">
            <el-date-picker v-model="formData.timeRange" :disabled='!editVersionStatus' :picker-options='pickerOptions' class='custom-picker' type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd' :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="面向车型" prop="oemList">
            <el-tag v-for='item in formData.oemList' :key='item.modelCode' class="base-info-oem-item" size="medium">{{ `${item.oem}/${item.series}/${item.model}` }}</el-tag>
          </el-form-item>
        </el-form>
        <!-- <div class="right-direction">
          <img src="../../../assets/edit_info_direction.png" class="direction-img">
          <div style="text-align: center">产品车端卡片效果示意</div>
        </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    const validateTime = (rule, value, callback) => {
      if (value && value.length !== 0) {
        callback()
      } else {
        callback(new Error('产品有效期不能为空'))
      }
    }
    return {
      dialogVisible: false,
      editVersionStatus: false, // 允许编辑
      formData: {
        remark: '',
        triggerDesc: '',
        serviceExecuteDesc: '',
        durationType: '',
        validityPeriod: {},
        timeRange: [],
        oemList: []
      },
      rules: {
        remark: [{ required: true, message: '版本描述不能为空', trigger: 'blur' }],
        durationType: [{ required: true, message: '产品有效期不能为空', trigger: 'change' }],
        triggerDesc: [{ required: true, message: '触发方式描述不能为空', trigger: 'blur' }],
        serviceExecuteDesc: [{ required: true, message: '服务执行描述不能为空', trigger: 'blur' }],
        timeRange: [
          { validator: validateTime, trigger: 'change' }
        ]
      },
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) { this.timeOptionRange = minDate }
          if (maxDate) { this.timeOptionRange = null }
        },
        disabledDate: (time) => {
          let res = false
          if (this.timeOptionRange) { // 不能选择同一天
            res = time.getTime() === this.timeOptionRange.getTime()
          }
          if (!res) { // 不能选择今天之前
            res = time.getTime() < Date.now() - 8.64e7
          }
          return res
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.$refs.form.clearValidate()
    },
    confirmEdit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const formData = deepClone(this.formData)
          if (formData.durationType === 'period') {
            formData.validityPeriod = {
              startTime: formData.timeRange[0],
              endTime: formData.timeRange[1]
            }
          }
          const newProductInfo = {}
          Object.assign(newProductInfo, this.productInfo, formData)
          this.updateProductInfo(newProductInfo)
          this.$store.commit('graph/setExitState', false)
          this.handleClose()
        }
      })
    },
    ...mapActions({
      updateProductInfo: 'product/updateProductInfo'
    })
  },
  watch: {
    dialogVisible: function(val) {
      if (val) {
        const data = deepClone(this.productInfo)
        data.durationType === 'period' && (data.timeRange = [data.validityPeriod.startTime, data.validityPeriod.endTime])
        this.editVersionStatus = ['0', '4', '6'].some(item => item === data.productStatus)
        this.formData = data
      }
    }
  },
  computed: {
    ...mapState({
      productInfo: state => state.product.productInfo
    })
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/variables";
.edit-base-dialog{
  // display: flex;
  // align-items: center;
  .left-form{
    // width: 550px;
    // padding-right: 20px;
    // border-right: 1px solid #EBEBEB;
    .edit-base-dialog-time-range{
      // margin-top: -14px;
      .custom-picker{
        .el-range__icon{
          position: absolute;
          right: 0;
        }
        .el-range-input{
          text-align: left;
        }
      }
    }
    .base-info-oem-item{
      background-color: #EBEBEB;
      color: #606060;
      margin-right: 8px;
      margin-bottom: 4px;
      padding: 0 8px;
      font-size: 12px;
      line-height: 24px;
      height: 24px;
    }
    .duration-type-area {
      background: $color-gray;
      padding: 0 16px;
    }
  }
  .right-direction{
    padding-left: 20px;
    flex: 1 0 100px;
    .direction-img{
      width: 100%;
    }
  }
}
.page-edit-base-info{
  display: flex;
  align-items: center;
  .prod-base-info{
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    font-weight: 700;
    padding: 2px 10px 0 0;
    color: $--color-text-primary;
  }
  .icon-edit{
    cursor: pointer;
    font-size: 16px;
  }
}
</style>
